<template>
  <view class="credit-record-container">
	  <status-bar></status-bar>
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="back-btn" @click="goBack">
        <image src="/static/images/icon/backward_flat.png" class="back-icon-img"></image>
      </view>
      <view class="nav-title">信用分记录</view>
    </view>
    
    <!-- 日期筛选区域 -->
    <view class="date-filter">
      <text class="date-range">{{startDate}} 至 {{endDate}}</text>
      <view class="date-picker" @click="showDatePicker">
        <text class="date-picker-text">筛选</text>
        <uni-icons type="calendar" size="16" color="#666"></uni-icons>
      </view>
    </view>
    
    <!-- 信用分记录列表 -->
    <view class="credit-list">
      <view class="credit-item" v-for="(item, index) in creditRecords" :key="index">
        <view class="item-left">
          <view class="item-title">{{item.title}}</view>
          <view class="item-time">{{item.time}}</view>
        </view>
        <view class="item-right">
          <text :class="{'credit-increase': item.points > 0, 'credit-decrease': item.points < 0}">
            {{item.points > 0 ? '+' : ''}}{{item.points}}
          </text>
          <view class="item-credit">信用分:{{item.credit}}</view>
        </view>
      </view>
      
      <!-- 加载更多 -->
      <view class="load-more" v-if="hasMoreData">
        <text @click="loadMore">加载更多</text>
      </view>
      <view class="no-more" v-else>
        <text>没有更多数据了</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      startDate: '2025-04-29',
      endDate: '2025-05-29',
      currentPage: 1,
      hasMoreData: true,
      creditRecords: [
        {
          title: '准时签到',
          time: '05-22 12:27',
          points: 15,
          credit: 140
        },
        {
          title: '及时预约',
          time: '05-20 09:27',
          points: 10,
          credit: 125
        },
        {
          title: '客户好评',
          time: '05-14 09:27',
          points: 20,
          credit: 115
        },
        {
          title: '客户差评',
          time: '04-30 09:27',
          points: -10,
          credit: 95
        }
      ]
    }
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    showDatePicker() {
      // 这里可以实现日期选择器的逻辑
      uni.showToast({
        title: '日期筛选功能开发中',
        icon: 'none'
      });
    },
    loadMore() {
      // 模拟加载更多数据
      uni.showLoading({
        title: '加载中...'
      });
      
      setTimeout(() => {
        uni.hideLoading();
        
        // 模拟没有更多数据
        this.hasMoreData = false;
        
        uni.showToast({
          title: '没有更多数据了',
          icon: 'none'
        });
      }, 1000);
    }
  }
}
</script>

<style lang="scss" scoped>
.credit-record-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 顶部导航栏 */
.nav-bar {
  display: flex;
  align-items: center;
  height: 90rpx;
  background-color: #4c9bfb;
  color: #fff;
  padding: 0 30rpx;
  position: relative;
}

.back-btn {
  position: absolute;
  left: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon-img {
  width: 40rpx;
  height: 40rpx;
}

.nav-title {
  flex: 1;
  text-align: center;
  font-size: 36rpx;
}

/* 日期筛选区域 */
.date-filter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.date-range {
  font-size: 28rpx;
  color: #333;
}

.date-picker {
  display: flex;
  align-items: center;
}

.date-picker-text {
  font-size: 28rpx;
  color: #666;
  margin-right: 10rpx;
}

/* 信用分记录列表 */
.credit-list {
  background-color: #fff;
}

.credit-item {
  display: flex;
  justify-content: space-between;
  padding: 30rpx;
  border-bottom: 1px solid #eee;
}

.item-left {
  display: flex;
  flex-direction: column;
}

.item-title {
  font-size: 32rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.item-time {
  font-size: 24rpx;
  color: #999;
}

.item-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.credit-increase {
  font-size: 32rpx;
  color: #e74c3c;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.credit-decrease {
  font-size: 32rpx;
  color: #2ecc71;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.item-credit {
  font-size: 24rpx;
  color: #999;
}

/* 加载更多 */
.load-more, .no-more {
  text-align: center;
  padding: 30rpx;
  font-size: 28rpx;
  color: #999;
}
</style>